<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content='IE=edge' charset="utf-8" />
<title>F4 Helper</title>
<link rel="Stylesheet" type="text/css" href="../../<%=theme%>/css/bi_app_style.css" />

<script id='sap-ui-bootstrap' type='text/javascript'
        src='../../../ySAPUI5/SAPUI5/resources/sap-ui-core.js'
        data-sap-ui-theme='sap_goldreflection' data-sap-ui-libs='sap.ui.table'></script>
<script type='text/JavaScript' src='../../../zbw_reporting/scripts/framework_include.js'></script>
<script>
//comment this line when done testing
//$(function(){initialize();});

var BOI = parent.BOI; //REQUIRED

var properties = { //REQUIRED
    multiSelect : true,
    itemsPerPage : 3,
    width : "150px",
    variable: undefined,
    value: undefined,
    notify: false
};

window.onload = function() {
}

var count = 0;
var SBSteps = 0;
var searchTerm = undefined;
var cycleNewClick = '';
var selectedItems = new Array();
// create JSON model instance
var oModel = new sap.ui.model.json.JSONModel();
var oVSB = new sap.ui.core.ScrollBar("vertSB");
// search field

var initialize = function initialize() {//REQUIRED //initialization function ... see below..
    $('.title h2').html(properties.variable.description);
    var oSearch = new sap.ui.commons.SearchField("liveSearch", {
        enableListSuggest : false,
        enableClear : true,
        width : properties.width,
        startSuggestion : 0,
        search : function(oEvent) {
            //searchTerm = oEvent.getParameter("query");
            BOI.loadF4Values(properties.variable.name, 1,
                    properties.itemsPerPage, function(data) {
                        oModel.setJSON(data.json);
                        oModel.updateBindings();

                        oVSB.setScrollPosition(0);
                        SBSteps = Math.floor(parseInt(data.total)
                                / properties.itemsPerPage);
                        oVSB.setSteps(SBSteps);
                    }, undefined, searchTerm, 'JSON', undefined, 'bex3');
        },
        suggest : function(oEvent) {
            searchTerm = oEvent.getParameter("value");
            searchTerm = searchTerm === '' ? undefined : searchTerm;

            BOI.loadF4Values(properties.variable.name, 1,
                    properties.itemsPerPage, function(data) {

                        oModel.setJSON(data.json);
                        oModel.updateBindings();
                        oVSB.setScrollPosition(0);
                        SBSteps = Math.floor(parseInt(data.total)
                                / properties.itemsPerPage);
                        oVSB.setSteps(SBSteps);
                    }, undefined, searchTerm, 'JSON', undefined, 'bex3');
        }
    });

    BOI.loadF4Values(properties.variable.name, 1, properties.itemsPerPage,
            function(data) {

                // set the data for the model

                oModel.setJSON(data.json);

                sap.ui.getCore().setModel(oModel);

                //  total steps for SB is the total item divided by items per one page.
                SBSteps = Math.floor(parseInt(data.total)
                        / properties.itemsPerPage);

                // Create a vertical scrollbar with size 200 px and 20 steps
                var sbSize = properties.itemsPerPage * 19 + 23;
                oVSB.setSize(sbSize + "px");
                oVSB.setSteps(SBSteps);
                // Initial scroll position - in steps
                oVSB.setScrollPosition(0);
                oVSB.addStyleClass("floatLeft");
                // attach it to some other element in the page

                oVSB.attachScroll(function(oEvent) {
                    cycleNewClick = 's'; // scroll only happens
                    var position = oVSB.getScrollPosition();
                    oTextView1.setText("Scroll position: " + position);
                    // load the next cycle of F4 values by changing the data of model with the new loaded one.
                    BOI.loadF4Values(properties.variable.name, position + 1,
                            properties.itemsPerPage, function(data) {

                                oModel.setJSON(data.json);
                                oModel.updateBindings();
                            }, undefined, searchTerm, 'JSON', undefined,
                            'bex3');
                });

                var html1 = new sap.ui.core.HTML("html1", {
                    content : "<br/>"
                });
                var html2 = new sap.ui.core.HTML("html2", {
                    content : "<div> </div>"
                });

                //create the template control that will be repeated and will display the data
                var oRowTemplate = new sap.ui.core.ListItem({
                    text : "{VALUE}",
                    key : "{NAME}"
                });

                //Create the ListBox
                var oSimpleListBox = new sap.ui.commons.ListBox({
                    visibleItems : properties.itemsPerPage,
                    items : {
                        path : "/VALUES_TABLE_C/IHTTPNVP",
                        template : oRowTemplate
                    },
                    width : properties.width,
                    select : function(e) {

                        var a = [ "Your selection: " ];
                        var temparr = new Array();
                        jQuery.each(oSimpleListBox.getSelectedItems(),
                                function(idx, item) {
                                    a.push(item.getKey(), ",");
                                    selectedItems.push(item.getKey());
                                    temparr.push(item.getKey());
                                    if (!oSimpleListBox
                                            .getAllowMultiSelect())
                                        selectedItems = [ item.getKey() ];

                                });
                        selectedItems = eliminateDuplicates(selectedItems);
                        // when scroll happens, first select after scroll is always will add to selection values event without cntl click.
                        if (cycleNewClick === 's') {
                            cycleNewClick = 'sc';
                        }
                        // the second select will add to selection values only with cntl click
                        else if (cycleNewClick === 'sc') {

                            if (temparr.length === 1)
                                selectedItems = temparr;
                        }
                        // no scroll happens
                        else {

                            selectedItems = temparr;
                            cycleNewClick = '';
                        }

                        //oTextSummary.setText(selectedItems.join(","));

                        properties.value = selectedItems;

                        if(properties.notify)
                            BOI.Events.raiseEvent(BOI.Events.varchange, [
                                properties.variable.name, selectedItems ]);
                    }
                });

                var oTextSummary = new sap.ui.commons.TextView();
                oSimpleListBox.setAllowMultiSelect(properties.multiSelect);
                var oMultiSelectionCheckBox = new sap.ui.commons.CheckBox({
                    text : "MultiSelection",
                    checked : properties.multiSelect,
                    change : function(e) {
                        oSimpleListBox.setAllowMultiSelect(e.getSource()
                                .getChecked());
                        selectedItems = [];
                        jQuery.each(oSimpleListBox.getSelectedItems(),
                                function(idx, item) {
                                    selectedItems.push(item.getKey());
                                    if (!oSimpleListBox
                                            .getAllowMultiSelect())
                                        selectedItems = [ item.getKey() ];
                                });

                        properties.value = selectedItems;

                        if(properties.notify)
                            BOI.Events.raiseEvent(BOI.Events.varchange, [
                                properties.variable.name, selectedItems ]);
                    }
                });

                var oTextView1 = new sap.ui.commons.TextView();
                oTextView1.setText("Scroll position: "
                        + oVSB.getScrollPosition());
                oTextView1.setTooltip("Scroll position");

                // attach it to some element in the page

                oVSB.placeAt("content");
                oSearch.placeAt("content");
                html1.placeAt('content');
                oSimpleListBox.placeAt("content");
                //oMultiSelectionCheckBox.placeAt("content");
                html2.placeAt("content");
                oTextSummary.placeAt("content");
                html2.placeAt("content");
                oMultiSelectionCheckBox.placeAt("content");
                //oTextView1.placeAt("content");

            }, undefined, undefined, 'JSON', undefined, 'bex3');

    /*---- begin your component custom initialization code ----*/

    //example to set property values to dom elements
    refreshProperties();

};

var refresh = function refresh() { //REQUIRED function to be called by parent at anytime to refresh data.
};
var refreshProperties = function refreshProperties() { //REQUIRED function to be called by parent when a property change occurs
};

function eliminateDuplicates(arr) {
    var i, len = arr.length, out = [], obj = {};

    for (i = 0; i < len; i++) {
        obj[arr[i]] = 0;
    }
    for (i in obj) {
        out.push(i);
    }
    return out;
}
</script>

</head>
<body class="droplist-body">
<div class="title"><h2></h2></div>
<div id="bi_var_name"></div>
<p id="bi_desc"></p>
<div id='content' class="var_content"></div>
</body>
</html>
<%
theme = ''.
%>